<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" +
			request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<title>疫情统计</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<link rel="shortcut icon" href="<%=basePath%>static/favicon.ico" type="image/x-icon"/>
	<link rel="stylesheet" href="<%=basePath%>static/css/font.css">
	<link rel="stylesheet" href="<%=basePath%>static/css/xadmin.css">
	<link rel="stylesheet" href="<%=basePath%>static/css/bootstrap.css">
	<link rel="stylesheet" href="<%=basePath%>static/lib/layui/css/layui.css">
	<script type="text/javascript" src="<%=basePath%>static/js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>static/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>static/lib/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="<%=basePath%>static/js/xadmin.js"></script>
</head>
<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="#">疫情数据</a>
      </span>
	<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
	   href="javascript:location.replace(location.href);" title="刷新">
		<i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
	<div class="layui-row">
		<form class="layui-form layui-col-md12 x-so">
			<input type="text" id="inputProvinceName" name="inputProvinceName" placeholder="请输入需要查询的省份" autocomplete="off" class="layui-input">
			<button class="layui-btn" type="button" onclick="queryInfoByProvinceName()"><i class="layui-icon">&#xe615;</i></button>
		</form>
	</div>
	<table class="layui-hide" id="data_info" lay-filter="data_info" width="100%"></table>

</div>
<script>
    layui.use(['jquery','laypage', 'layer','table','form','element'], function(){
		table = layui.table;
        table.render({
            elem: '#data_info'
            ,url:'<%=basePath%>info/queryAllInfo'
            ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
            }
            ,title: '订单数据表'
            ,limits:[12,24,36,48,60,72,84,96,108,999]
            ,limit:12
            ,cols: [[
                {field:'id', width:80, title: 'ID', sort: true}
                ,{field:'time', width: 200, title: '时间'}
                ,{field:'provinceName', width:100, title: '省份'}
                ,{field:'areaName', width:120, title: '城市'}
                ,{field:'confirmCount',width:120, title: '确诊人数', edit: 'text',}
                ,{field:'curedCount', width:120, title: '治愈人数', edit: 'text'}
                ,{field:'deadCount', width:120, title: '死亡人数', edit: 'text'}
            ]],
        });
        //监听单元格编辑
        table.on('edit(data_info)', function(obj){
            var oldText = $(this).prev().text();// 单元格编辑之前的值
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field //得到字段
				,name='';
            $value=$(this);
			if (field==="confirmCount"){name="确诊人数";}
            else if (field==="curedCount"){name="治愈人数";}
            else {name="死亡人数";}
            if(isNaN(value)||value===""||value<0){
                layer.alert("输入不正确！！！");
                $value.val(oldText);
            }
            else{
                $.ajax({
					url:"<%=basePath%>info/updataInfoById",
					type:"post",
					dataType:"json",
					data:{"id":data.id,
                          "dataType":field,
                          "data":value},
					success:function (da) {
					    console.log(da);
					    if (da==="success")
                        	layer.msg('[ID: '+ data.id +'] ' +data.provinceName+data.areaName+'的 '+ name + ' 更改为：'+ value);
					    else{
                            $value.val(oldText);
                            layer.msg("修改失败");
						}
                    },error:function () {
						layer.alert("服务器错误");
                    }
				})
            }
        });
    });
    function queryInfoByProvinceName() {
        if($("#inputProvinceName").val()===""){
            layer.alert("输入错误！！！");
            return;
		}
        tableIns = table.render()
        tableIns.reload({
            elem: '#data_info'
			,cols: [[
				{field:'id', width:80, title: 'ID', sort: true}
				,{field:'time', width: 200, title: '时间'}
				,{field:'provinceName', width:100, title: '省份'}
				,{field:'areaName', width:120, title: '城市'}
				,{field:'confirmCount',width:120, title: '确诊人数', edit: 'text',}
				,{field:'curedCount', width:120, title: '治愈人数', edit: 'text'}
				,{field:'deadCount', width:120, title: '死亡人数', edit: 'text'}
			]]
            ,limits:[12,24,36,48,60,72,84,96,108,999]
            ,limit:12
            ,url: '<%=basePath%>info/queryAllInfoByProvinceName' //设置异步接口
            ,where: {ProvinceName: $("#inputProvinceName").val()}
            ,page:{
                curr: 1 //重新从第 1 页开始
			}
        },true);
    }
</script>
</body>
</html>
